<!DOCTYPE html>
<html lang="en" xmlns:el-dialog="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Element UI:Pagination：分页条</title>
    <link rel="stylesheet" href="../element/index.css">
    <script src="../js/vue.js"></script>
    <script src="../element/index.js"></script>
</head>
<body>
<div id="app">
    <el-table :data="ta" stripe>
        <el-table-column prop="data" lable="日期"></el-table-column>
        <el-table-column prop="name" lable="姓名"></el-table-column>
        <el-table-column prop="address" lable="地址"></el-table-column>
        <el-table-column label="操作" align="center">
            <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="handleUpdata(scope.row)">编辑</el-button>
                <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
<!--    分页条-->

    <el-pagination @current-change="handleCurrentChange"
                   :current-page="5"
                   :page-size="10"
                   layout="total,prev,pager,next,jumper"
                   :total="300">

    </el-pagination>
<!--    layout中的jumper别写错了-->
</div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            ta:[{
                data:'2016-09-09',
                name:'王一',
                address:'上海'},
                {data:'3095-94-49',
                    name:'王二',
                    address:'长沙'
                }]
        },
        methods:{
            handleDelete(row){
                alert(row.data);
            },
            handleUpdata(row){
                alert(row.name);
            },handleCurrentChange(page){
                alert(page);
            }
        }
    })
</script>
</html>